<template>
    <div class="oneNode">
        <div class="imgBox" v-if="data.children.length > 0">
            <img @click="toggle" v-if="isOpen" src="@/assets/img/study/up.png" alt="">
            <img @click="toggle" v-else src="@/assets/img/study/down.png" alt="">
        </div>
        <div v-else class="no-fss">

        </div>
        <span class="p-left" @click="toggle">
            {{data.name}}
        </span> 
        <span class="p-right">
            <span v-if="data.parentId != 0">
                {{parseFloat((data.answerRate*100).toFixed(2))}}%
            </span>
            <span class="progressBig" v-if="data.parentId != 0">
                <span :style="{width: parseFloat((data.answerRate*100).toFixed(2)) + '%'}" class="progressMin" :class="{'progressAll': data.answerRate == 1}"></span>
            </span>
            <img @click="answerClick" src="@/assets/img/study/edit.png" alt="">
        </span>
           
        <div class="children" :class="{'open': isOpen}">
            <tree-item 
                v-for="(item, index) in data.children" 
                :key="index"    
                :data="item" 
                :props="props"
                @answer='answer'
            ></tree-item>
        </div>
              
      
    </div>
</template>
<script>
export default {
      name: 'treeItem',
    props: {
        data: Object,
        props: Object
    },
    data(){
        return {
            isOpen: false
        }
    },
    methods: {
        toggle(){
            this.isOpen = !this.isOpen
        },
        answerClick(){
            this.$emit('answer', this.data)
        },
         answer(item){
            this.$emit('answer', item)
        }
    }
}
</script>
<style scoped lang="less">
.oneNode{
    width: 100%;
    padding: 0.2rem 0;

    .imgBox{
        display: inline-block;
        img{
            vertical-align: middle;
            width: 0.42rem;
            height: 0.42rem;
        }
    }
    span{
        display: inline-block;
            vertical-align: middle;
    }
    .p-right{
        float: right;
        color: #999999;
        font-size: 0.24rem;
        *{
            vertical-align: middle;
        }
        img{
            width: 0.26rem;
        }
    }
    .progressBig{
        position: relative;
        display: inline-block;
        width: 0.84rem;
        height: 0.14rem;
        background: #E4E4E4;
        border-radius: 0.07rem;
        .progressMin{
            border-radius: 0.07rem 0 0 0.07rem;
            position:absolute;
            height:100%;
            background-color:#FF9900;
        }
        .progressAll{
            border-radius: 0.07rem
        }
    }
    
}
.children{
    padding: 0 0 0 0.5rem;
    transition: 0.2s;
    height: 0;
    overflow: hidden;
}
.open{
    height: auto;
}
.no-fss{
    margin: 0 0.15rem;
    display: inline-block;
    vertical-align: middle;
    width: 0.12rem;
    height: 0.12rem;
    background: #d4d4d4;
    border-radius: 50%;
}
</style>